<!DOCTYPE html>
<html lang="en" ng-app="details">
  <head>
    <meta charset="utf-8">
    <meta name="robots" content="index,follow">
    <meta http-equiv="cache-control" content="public">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="Content-Language" content="en, english" />
    <link rel="icon" type="image/png" href="http://loklak.org/artwork/favicon.png">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link rel="stylesheet" type="text/css" href="css/details.css">
    <link rel="stylesheet" href="/css/animate.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/angular.min.js"></script>
    <script src="/js/angular-route.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/showdown.min.js"></script>
    <script type="text/javascript" src="js/details.js"></script>
    <script type="text/javascript" src="js/navdrawer.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
      <div class="container-fluid navbar-container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="navbar-brand brand-container">
            <a href="http://apps.loklak.org" class="loklak-brand"> <span class="loklak-header">
              loklak </span> <span>apps</span></a>
          </div>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="http://loklak.org/about">About</a></li>
            <li><a href="http://loklak.org/">Search</a></li>
            <li><a href="http://blog.loklak.net/">Blog</a></li>
            <li><a href="http://dev.loklak.org/">Developers</a></li>
            <li><a href="https://api.loklak.org/">Api</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="main app" ng-controller="detailsApp">
      <div ng-if="notFound" class="not-found">
        <span class="brand-and-image">
          <img src="images/loklak_icon.png">
          <span class="loklak-brand"> <span class="loklak-header">
            loklak </span> <span>apps</span>
          </span>
        </span>
        <span class="error-404">
          Error: Requested app not found
        </span>
        <span class="go-back">
          <a href="/"> Go Back to Home Page >> </a>
        </span>
      </div>
      <div ng-if="found" class="row">
        <div class="col-md-3">
          <div class="menu-drawer">
            <img src="images/sidebar-images/menu.png">
          </div>
          <div class="sidebar">
            <div class="sidebar-header">
              <div class="sidebar-header-image">
                <img src = "images/sidebar-images/menu.png">
              </div>
              <div class="category-header">
                <h4>Categories</h4>
              </div>
              <div class="sidebar-header-close">
                <img src = "images/sidebar-images/close.png">
              </div>
            </div>
            <div class="category-body">
              <ul class="menu-list">
                <li class="menu-list-item" ng-repeat="category in categories track by $index">
                  <a href="/#{{category.name.split(' ').join('')}}" class="menu-item" id="{{category.name | nospace}}"
                    ng-class="{selected: category.name.split(' ').join('') ==
                      selectedApp.applicationCategory.split(' ').join('')}">
                    <span class="category-image" ng-style = {{category.style}}>
                      <img ng-src="images/sidebar-images/{{category.image}}">
                    </span>
                    <span class="category-name"> {{category.name}} </span>
                  </a>
                </li>
              </ul>
            </div>
            <div class="category-footer">
              <p class="contribute"> Contribute your app on
                <a href="https://github.com/fossasia/apps.loklak.org">
                  Github
                </a>!
              </p>
            </div>
          </div>
        </div>
        <div class="col-md-6 middle">
          <div class="app-data">
            <div class="app-image-and-info">
              <div class="app-image animated fadeInDown">
                <img ng-src="../{{selectedApp.name}}/promo.png" class="img-rounded image-loaded img-responsive">
              </div>
              <div class="app-info">
                <h2 class="app-name"> {{selectedApp.name}} </h2>
                <h4 class="app-headline"> {{appData.headline}} </h4>
                <h5 class="author"> <a href={{appData.author.url}} class="author-link">
                  by {{appData.author.name}} </a> </h5>
                <div class="short-desc"> {{appData.oneLineDescription}} </div>
                <a href="../{{selectedApp.name}}" class="try-now"> Try Now </a>
              </div>
            </div>
            <div class="app-carousel animated fadeIn">
              <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner image-container">
                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                  <span class="glyphicon glyphicon-chevron-left"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                  <span class="glyphicon glyphicon-chevron-right"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>
            </div>
            <div class="get-started">
              <div class="get-stared-header">
                <h3 class="started-header"> Getting started </h3>
              </div>
              <div class="get-started-body get-started-md">
              </div>
            </div>
            <div class="get-started">
              <div class="get-stared-header">
                <h3 class="started-header"> App use </h3>
              </div>
              <div class="get-started-body app-use-md">
              </div>
            </div>
            <div class="get-started">
              <div class="get-stared-header">
                <h3 ng-if="isOthers" class="started-header"> Other details </h3>
              </div>
              <div class="get-started-body others-md">
              </div>
            </div>
            <div class="get-started additional-information">
              <hr>
              <div class="get-stared-header">
                <h3 class="started-header"> Additional Information </h3>
              </div>
              <div class="get-started-body row">
                <div ng-if="appData.updated !== undefined && appData.updated !== ''" class="col-md-4 add-info">
                  <div class="info-type">
                    <h5 class="info-header">
                      <strong>Updated</strong>
                    </h5>
                  </div>
                  <div class="info-body">
                    {{appData.updated}}
                  </div>
                </div>
                <div ng-if="appData.version !== undefined && appData.version !== ''" class="col-md-4 add-info">
                  <div class="info-type">
                    <h5 class="info-header">
                      <strong>Version</strong>
                    </h5>
                  </div>
                  <div class="info-body">
                    {{appData.version}}
                  </div>
                </div>
                <div ng-if="appData.appSource !== undefined && appData.appSource !== ''" class="col-md-4 add-info">
                  <div class="info-type">
                    <h5 class="info-header">
                      <strong>App Source</strong>
                    </h5>
                  </div>
                  <div class="info-body">
                    <a href="{{appData.appSource}}"> View Source </a>
                  </div>
                </div>
                <div ng-if="(appData.author.url !== undefined && appData.author.url !== '') ||
                  (appData.author.email !== undefined && appData.author.email !== '')" class="col-md-4 add-info">
                  <div class="info-type">
                    <h5 class="info-header">
                      <strong>Developer</strong>
                    </h5>
                  </div>
                  <div class="info-body">
                    <span ng-if="appData.author.url !== undefined && appData.author.url !== ''">
                      <a href="{{appData.author.url}}"> {{appData.author.name}} </a>
                    </span>
                    <a ng-if="appData.author.email !== undefined && appData.author.email !== ''" class="mail"
                      href="mailto:{{appData.author.email}}">
                      <span class="glyphicon glyphicon-envelope"></span>
                    </a>
                  </div>
                </div>
                <div ng-if="appData.contributors !== undefined && appData.contributors !== ''" class="col-md-4 add-info">
                  <div class="info-type">
                    <h5 class="info-header">
                      <strong>Contributors</strong>
                    </h5>
                  </div>
                  <div class="info-body">
                    <div class="dropdown">
                      <div class="dropdown-toggle" type="button" data-toggle="dropdown">
                        View all contributors
                      </div>
                      <ul class="dropdown-menu">
                        <li ng-repeat="contributor in appData.contributors">
                          <a href="{{contributor.url}}"> {{contributor.name}} </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div ng-if="appData.techStack !== undefined && appData.techStack !== ''" class="col-md-4 add-info">
                  <div class="info-type">
                    <h5 class="info-header">
                      <strong>Technology Stack</strong>
                    </h5>
                  </div>
                  <div class="info-body">
                    <div class="dropdown">
                      <div class="dropdown-toggle" type="button" data-toggle="dropdown">
                        View technology stack
                      </div>
                      <ul class="dropdown-menu">
                        <li ng-repeat="item in appData.techStack" class="tech-item">
                           {{item}}
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div ng-if="appData.license !== undefined && appData.license !== ''" class="col-md-4 add-info">
                  <div class="info-type">
                    <h5 class="info-header">
                      <strong>License</strong>
                    </h5>
                  </div>
                  <div class="info-body">
                    <a href="{{appData.license.url}}">{{appData.license.name}}</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="similar-apps">
            <div class="similar-apps-header">
              <h4> Similar apps </h4>
            </div>
            <div class="similar-apps-list">
              <div ng-repeat="app in similarApps" class="card animated fadeInUp">
                <a href="../details.html?q={{app.name}}">
                  <img ng-src="../{{app.name}}/screenshot.png" class="similar-app-image img-responsive" alt="App image">
                  <div class="card-container">
                    <h4>{{app.headline}}</h4>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <footer>
  </footer>
</html>
